<template>
  <el-button type="primary"  @click="open">添加</el-button>
  <el-button type="primary" @click="get(url+'/async')">同步</el-button>
  <el-input v-model="search" placeholder="请输入搜索内容" style="margin-bottom: 10px;" />
  <el-button @click="change" type="primary">提交</el-button>
  <el-input v-model="key" placeholder="请输入关键字" style="margin-bottom: 10px;" @keyup="searchByKey" />
  <el-table :data="searchData">
    <el-table-column prop="id" type="index" label="ID" width="120" />
    <el-table-column prop="stationName" label="name"/>
    <el-table-column prop="status" label="经纬度" width="120">
      <template #default="scope">
        <el-tag type="success">{{scope.row.stationLat}}</el-tag>
        <el-tag type="primary">{{scope.row.stationLng}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status===true" type="success">空闲</el-tag>
        <el-tag v-else type="danger">忙碌</el-tag>
      </template>
    </el-table-column>

  </el-table>
  <el-button type="primary"  @click="startCharging()">扫码充电</el-button>
  <el-button type="primary" >充电{{n}}</el-button>
  <el-button type="primary"  @click="get('/cloud-service-iot/iot/finish')">充电完成</el-button>
  <el-button type="primary"  @click="get('/cloud-service-bill/bill/pay')">支付</el-button>
  <h3>WebSocket 消息：</h3>
  <ul>
    <li v-for="message in messages" :key="message">{{ message }}</li>
  </ul>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref} from 'vue'
import get from "../../../api/get";
import { ElMessage, ElMessageBox } from 'element-plus'
import post from "../../../api/post";
import put from "../../../api/put";
import del from "../../../api/del";



const tableData = ref([])
const url="/cloud-service-charging/station"
const subject="充电站"

let n=ref(10)

const fetchList=()=>get(url).then(res=>tableData.value=res)

fetchList()

const open = () => {
  ElMessageBox.prompt(`请输入${subject}名`, `添加${subject}`, {confirmButtonText: '确认', cancelButtonText: '取消'}).then(({ value }) => {
    post(url,{name:value}).then(res=>tableData.value=res)
    ElMessage({type: 'success', message: `${subject}添加成功`,})
  })
}

const update = (row) => {
  ElMessageBox.prompt(`请输入${subject}名`, `修改${subject}`, {confirmButtonText: '确认', cancelButtonText: '取消'}).then(({ value }) => {
    put(url,{id:row.id,name:value}).then(res=>tableData.value=res)
    ElMessage({type: 'success', message: `${subject}修改成功`,})
  })
}

const changeStatus=(row)=>put(url,{id:row.id, status: row.status})

const delByID=(id)=>del(url+"/"+id).then(res=>tableData.value=res)


const searchData=ref([])
const search = ref("")
const change=()=>{
  let s=search.value.split(",");
  if(s.length!==6) return
  get(url+"/"+s[0]+"/"+s[1]+"/"+s[2]+"/"+s[3]+"/"+s[4]+"/"+s[5]).then(res=>searchData.value=res)
}

const key = ref("")

const searchByKey=()=>{
  if(key.value.length===0) return
  get(url+"/search/"+key.value).then(res=>{
    console.log(res)
    searchData.value=res
  })
}


const startCharging=async ()=>{
  const hello =await get('/cloud-service-iot/iot')
  if(hello){
    while (true){
      n.value =await get('/cloud-service-bill/bill/process')
      setInterval(()=>{},1000)
      if(n.value===100){
        break;
      }
    }
  }
}


const socket = ref(null)
const messages = ref([])
onMounted(() => {
  // 建立WebSocket连接
  socket.value = new WebSocket('ws://localhost:9006/ws/ruowu')
  // 监听WebSocket事件
  socket.value.addEventListener('open', () => {
    console.log('WebSocket 连接已建立')
    socket.value.send(JSON.stringify({ action: 'getChargeStatus' }));
  })
  socket.value.addEventListener('message', (event) => {
    const receivedMessage = event.data
    console.log('接收到的消息：', receivedMessage)
    messages.value.push(receivedMessage)
  })
  socket.value.addEventListener('close', () => {
    console.log('WebSocket 连接已关闭')
  })
})

onBeforeUnmount(() => {
  if (socket.value) {
    socket.value.close()
  }
})

</script>